<template>
	<div id="search">
		<input type="button"  class="search_button" value="Search"><input type="text" class="search_text" placeholder="请输入搜索内容">
	</div>
</template>

<script >
	export default {
		name:'search',
		data() {
			return{

			}
		}
	}
</script>

<style >
	#search{
		width: 200px;
		height: 17px;
		line-height: 30px;
		overflow: hidden;
		/*background-color: red;*/
		margin-top:7px; 



	}
	.search_text{
		width: 100px;
		outline: none;
		border:none;
		border-bottom-right-radius: 5px;
		border-top-right-radius: 5px; 
		float:left;
		transition: all 0.3s;
		font-size: 13px;
		font-family: 'SimHei'
	}
	

	.search_text:focus{
		width: 140px;
	}
	.search_button{
		outline: none;
		/* background-color: rgba(252, 249, 249,0.5); */
		background-color: rgba(240,144,144,1);
		border:none;
		color:white;
		border-bottom-left-radius: 5px;
		border-top-left-radius: 5px; 
		border-right: 1px solid #d1d1d1;
		height: 16.53px;
		float: left;
        
		font-family:'Arial','MS Serif','SimHei'; 
		cursor: pointer;
		transition: all 0.5s;
	}
	.search_button:hover{
		background-color: rgb(88, 118, 134);
		color: white;
	}
</style>